<template>
	<view class="container">
		<view class="head">编辑人员信息</view>
		<view class="card-box">
			<view class="item display-flex arrow" @click="onTime">
				<view class="label">用户名</view>
				<input class="input" placeholder-class="input-placeholder" :value="person.name" placeholder="请输入"
					maxlength="15" @input="onInput($event,'name')" />
			</view>
			<view class="item display-flex arrow">
				<view class="label">联系电话</view>
				<input class="input" placeholder-class="input-placeholder" :value="person.phone" placeholder="请输入"
					maxlength="15" @input="onInput($event,'phone')" />
			</view>
			<view class="item display-flex arrow">
				<view class="label">选择门店</view>
				<view class="input" @click="openShopPopup()">
					{{checkedShop.name?checkedShop.name:'请选择'}}
				</view>
			</view>
			<view class="item display-flex arrow">
				<view class="label">配送小区</view>
				<view class="input" @click="openPopup()">
					{{checkedArea.label?checkedArea.label:'请选择'}}
				</view>
			</view>
			<view class="item display-flex arrow">
				<view class="label">配送详细地址</view>
				<input class="input" placeholder-class="input-placeholder" :value="person.addressDesc" placeholder="请输入"
					maxlength="15" @input="onInput($event,'addressDesc')" />
			</view>
		</view>
		<view class="logout" :class="time?'active':''" @click="onSubmit()">保存</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupView">
				<view class="title">
					选择配送小区
					<image src="/static/icon_close.png" @click="closePopup" />
				</view>
				<view class="list">
					<view :class="item.id == selectedArea.id && 'active'" v-for="(item, index) in areaList"
						@click="clickListItem(item)" :key="index">{{item.label}}</view>
				</view>
				<view class="popup_btn" @click="confirmPopup">确认</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupShop" type="bottom">
			<view class="popupView">
				<view class="title">
					选择店铺
					<image src="/static/icon_close.png" @click="closeShopPopup()" />
				</view>
				<view class="list">
					<view :class="item.deptId == selectedShop.deptId && 'active'" v-for="(item, index) in shopList"
						@click="clickShopListItem(item)" :key="index">{{item.name}}</view>
				</view>
				<view class="popup_btn" @click="confirmShopPopup">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import utils from '/common/util.js'
	// 选择接单人员-dom对象
	const popup = ref()
	const popupShop = ref()
	const userInfo = ref(getApp().globalData.userInfo)
	const person = ref({
		name: '',
		addressDesc: '',
		phone: '',
		deptName: ''
	})
	const checkedArea = ref({})
	const selectedArea = ref({})
	// 小区列表
	const areaList = ref([])

	const checkedShop = ref({})
	const selectedShop = ref({})
	// 店铺列表
	const shopList = ref([])

	// 点击表单-输入类型
	const onInput = (e, param) => {
		person.value[param] = e.detail.value
	}
	const onSubmit = () => {
		if (!person.value.name) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none'
			})
			return
		}
		if (!person.value.phone) {
			uni.showToast({
				title: '请输入联系电话',
				icon: 'none'
			})
			return
		}
		if (!checkedShop.value.deptId) {
			uni.showToast({
				title: '请选择店铺',
				icon: 'none'
			})
			return
		}
		if (!checkedArea.value.value) {
			uni.showToast({
				title: '请选择配送小区',
				icon: 'none'
			})
			return
		}
		if (!person.value.addressDesc) {
			uni.showToast({
				title: '请输入详细配送地址',
				icon: 'none'
			})
			return
		}
		uni.showLoading({
			title: '保存中...',
			mask: true
		})

		getApp().globalData.serviceApi({
			name: person.value.name,
			addressDesc: person.value.addressDesc,
			phone: person.value.phone,
			addressCode: checkedArea.value.value,
			deptId: checkedShop.value.deptId
		}, 'userBind', '').then(res => {
			uni.hideLoading()
			if (res.code === 200) {
				uni.showToast({
					title: res.message ? res.message : '保存失败，请稍后重试',
					icon: 'none'
				})
				return
			}
			utils.saveToken(res.data.Authorization)
			getApp().globalData.userInfo = res.data.userInfo
			uni.navigateBack()
		}).catch(error => {
			uni.showToast({
				title: '保存失败，请稍后重试',
				icon: 'none'
			})
		})

	};
	// 获取店铺列表
	const getShopList = (code) => {
		getApp().globalData.serviceApi({}, 'getDeptInfo', 'POST').then(res => {
			shopList.value = res.data
			if (checkedShop.value.deptId) {
				for (let a = 0; a < shopList.value.length; a++) {
					if (shopList.value[a].deptId === checkedShop.value.deptId) {
						checkedShop.value = shopList.value[a]
					}
				}
			}
		})
	}
	// 选择店铺
	const clickShopListItem = (item) => {
		selectedShop.value = item
	}
	// 打开选择店铺、小区弹框
	const openShopPopup = () => {
		selectedShop.value = JSON.parse(JSON.stringify(checkedShop.value))
		popupShop.value.open()
	}
	// 关闭选择店铺弹框
	const closeShopPopup = () => {
		popupShop.value.close()
	}
	// 点击选择店铺弹框确认
	const confirmShopPopup = () => {
		checkedShop.value = JSON.parse(JSON.stringify(selectedShop.value))
		popupShop.value.close()
	}

	// 获取小区
	const getAreaList = (code) => {
		getApp().globalData.serviceApi({
			"dictType": "address",
		}, 'getDictData', 'POST').then(res => {
			areaList.value = res.data
			if (checkedArea.value.value) {
				for (let a = 0; a < areaList.value.length; a++) {
					if (areaList.value[a].value === checkedArea.value.value) {
						checkedArea.value = areaList.value[a]
					}
				}
			}
		})
	}
	// 选择小区
	const clickListItem = (item) => {
		selectedArea.value = item
	}
	// 打开选择小区弹框
	const openPopup = (item) => {
		selectedArea.value = JSON.parse(JSON.stringify(checkedArea.value))
		popup.value.open()
	}
	// 关闭选择小区弹框
	const closePopup = () => {
		popup.value.close()
	}
	// 点击选择小区弹框确认
	const confirmPopup = () => {
		checkedArea.value = JSON.parse(JSON.stringify(selectedArea.value))
		popup.value.close()
	}
	onLoad((option) => {
		console.log('8888', userInfo.value)
		person.value.name = userInfo.value.name
		person.value.phone = userInfo.value.phone
		person.value.addressDesc = userInfo.value.addressDesc
		checkedArea.value.value = userInfo.value.addressCode
		checkedShop.value.deptId = userInfo.value.deptId
		getAreaList()
		getShopList()
		// cardInfo.value = JSON.parse(option.data);
	});
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		min-height: 100%;
		background-color: #f1f1f1;
		padding: 0 30rpx;

		.head {
			padding: 44rpx 0rpx 24rpx;
			font-size: 28rpx;
			color: #333;
		}

		.card-box {
			padding: 0 48rpx;
			background-color: #fff;
			padding-bottom: 10rpx;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 10rpx 25rpx 0;
			margin-bottom: 20rpx;

			.item {
				font-size: 28rpx;
				// padding: 26rpx 0;
				border-bottom: 1rpx solid #edeff0;
				position: relative;
				height: 96rpx;
				line-height: 96rpx;

				.label {
					color: #999;
				}

				.value {
					width: calc(100% - 120rpx);
					text-align: right;
				}

				.input {
					height: 80rpx;
					line-height: 80rpx;
					width: calc(100% - 170rpx);
					font-size: 30rpx;
					color: #222222;
					text-align: right;
				}

				.input-placeholder {
					font-size: 30rpx;
					color: #939495;
				}

				&.arrow {
					padding-right: 34rpx;

					&::after {
						content: '';
						width: 28rpx;
						height: 28rpx;
						background-image: url('/static/icon_arrow_right.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -13rpx;
					}
				}


				&:last-child {
					border: none;
				}
			}
		}

		.logout {
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 34rpx;
			position: fixed;
			bottom: 80rpx;
			width: calc(100% - 60rpx);
			text-align: center;
			left: 30rpx;
			background: #2977ff;
			border-radius: 80rpx;
			opacity: 1;
		}
	}

	::v-deep .uni-modal {
		border-radius: 16rpx;
	}

	.popupView {
		background-color: #ffffff;
		padding: 0 48rpx;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 50rpx;

		.title {
			position: relative;
			// height: 50rpx;
			line-height: 120rpx;
			text-align: center;
			color: #2F3338;
			font-size: 32rpx;
			font-weight: bold;

			&>image {
				position: absolute;
				top: 44rpx;
				right: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.list {
			max-height: 600rpx;
			overflow-y: scroll;
			margin-bottom: 40rpx;

			&>view {
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				color: #2F3338;
				font-size: 32rpx;

				&.active {
					&::after {
						content: '';
						position: absolute;
						top: 32rpx;
						right: 0;
						width: 48rpx;
						height: 48rpx;
						background-image: url('/static/icon_yes.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}
			}
		}

		.popup_btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(90deg, #175DFF 0%, #2977FF 100%);
			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(23, 93, 255, 0.3);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;


		}
	}
</style>